<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧农场可视化中心</title>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="chart.umd.min.js" as="script">
    <script src="chart.umd.min.js"></script>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&family=Orbitron:wght@400;700&display=swap" as="style">
    
    <!-- 使用更快的CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #00aeff;
            --panel-bg-color: rgba(6, 25, 48, 0.7);
            --panel-border-color: rgba(0, 174, 255, 0.3);
            --text-color: #e0e0e0;
            --text-color-secondary: #a0a0a0;
            --glow-color: rgba(0, 174, 255, 0.5);
            --text-glow: 0 0 5px rgba(0, 174, 255, 0.5);
        }
        
        /* 增强动画效果 */
        @keyframes subtle-gradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(0,174,255,0.15); }
            50% { box-shadow: 0 0 30px rgba(0,174,255,0.3); }
        }
        
        @keyframes scan-line {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100vh); }
        }
        
        body, html {
            margin: 0; padding: 0; height: 100%; width: 100%;
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #02101e;
            color: var(--text-color);
            overflow: hidden;
        }
        
        /* 添加矩阵雨效果 */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(0, 174, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(0, 174, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(0, 174, 255, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }
        
        .container {
            display: grid;
            grid-template-columns: 350px 1fr 400px;
            grid-template-rows: 60px 50px 1fr;
            height: 100vh;
            gap: 10px; padding: 10px;
            box-sizing: border-box;
            background: linear-gradient(to bottom, #02101e, #041830);
        }
        
        .header {
            grid-column: 1 / 4; grid-row: 1;
            display: flex; justify-content: space-between; align-items: center;
            background: #02101e; padding: 0 20px;
            position: relative;
        }
        
        .farm-selector {
            display: flex; align-items: center; gap: 8px;
            padding: 6px 12px;
            background: rgba(0, 174, 255, 0.1);
            border: 1px solid rgba(0, 174, 255, 0.3);
            border-radius: 4px; color: var(--primary-color);
            cursor: pointer; font-size: 16px;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .farm-selector:hover {
            background: rgba(0, 174, 255, 0.2);
            box-shadow: 0 0 10px rgba(0, 174, 255, 0.3);
        }
        
        .farm-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: rgba(6, 25, 48, 0.95);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            padding: 8px 0;
            min-width: 200px;
            display: none;
            z-index: 1000;
            backdrop-filter: blur(10px);
        }
        
        .farm-dropdown.show {
            display: block;
        }
        
        .farm-option {
            padding: 8px 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex; align-items: center; gap: 8px;
        }
        
        .farm-option:hover {
            background: rgba(0, 174, 255, 0.1);
            color: var(--primary-color);
        }
        
        .farm-option.active {
            background: rgba(0, 174, 255, 0.2);
            color: var(--primary-color);
        }
        
        .header-title {
            position: absolute; left: 50%;
            transform: translateX(-50%);
            color: #fff; font-size: 32px; font-weight: 700;
            letter-spacing: 4px;
            text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color);
            animation: pulse-glow 3s ease-in-out infinite;
        }
        
        .header-datetime {
            font-family: 'Orbitron', sans-serif; font-size: 18px;
            color: var(--primary-color);
            text-shadow: var(--text-glow);
        }
        
        .main-nav {
            grid-column: 1 / 4; grid-row: 2;
            width: 100vw; background: rgba(0,28,58,0.85);
            display: flex; justify-content: center; align-items: center;
            gap: 24px; padding: 0 0 8px 0;
            border-bottom: 1px solid var(--panel-border-color);
            z-index: 100;
        }
        
        .nav-item {
            color: var(--text-color-secondary);
            font-size: 16px; font-family: 'Orbitron', 'Noto Sans SC', sans-serif;
            padding: 10px 18px; cursor: pointer;
            border-radius: 6px 6px 0 0;
            display: flex; align-items: center; gap: 6px;
            position: relative; background: transparent;
            transition: all 0.3s ease;
        }
        
        .nav-item::after {
            content: ''; position: absolute;
            bottom: 0; left: 50%;
            transform: translateX(-50%);
            width: 0; height: 3px;
            background: var(--primary-color);
            transition: width 0.3s ease;
            box-shadow: 0 0 8px var(--glow-color);
            border-radius: 2px;
        }
        
        .nav-item.active, .nav-item:hover {
            color: var(--primary-color);
            background: rgba(0,174,255,0.1);
            text-shadow: 0 0 5px var(--glow-color);
        }
        
        .nav-item:hover::after, .nav-item.active::after { width: 80%; }
        
        .panel {
            background: linear-gradient(145deg, rgba(6, 25, 48, 0.7), rgba(6, 25, 48, 0.85));
            background-size: 200% 200%;
            animation: subtle-gradient 15s ease infinite;
            border: 1px solid var(--panel-border-color);
            border-radius: 4px; padding: 15px;
            margin: 0; display: flex; flex-direction: column;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,174,255,0.15);
            position: relative;
        }
        
        .panel::before, .panel::after {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            border-color: var(--primary-color);
            border-style: solid;
            transition: all 0.3s ease-in-out;
        }
        
        .panel::before {
            top: -2px;
            left: -2px;
            border-width: 2px 0 0 2px;
        }
        
        .panel::after {
            bottom: -2px;
            right: -2px;
            border-width: 0 2px 2px 0;
        }
        
        .panel:hover::before, .panel:hover::after {
             width: calc(100% + 3px);
             height: calc(100% + 3px);
        }
        
        .panel-content {
            flex-grow: 1; display: flex; flex-direction: column;
            gap: 8px; overflow-y: auto;
            max-height: calc(100vh - 150px);
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) transparent;
        }
        
        .panel-content::-webkit-scrollbar { width: 4px; }
        .panel-content::-webkit-scrollbar-track { background: transparent; }
        .panel-content::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 2px; }
        
        .panel-title{
            color: var(--primary-color);
            font-size:18px; font-weight: bold;
            display: flex; align-items: center;
            gap: 8px; margin-bottom: 6px;
            position: relative; padding-left: 15px;
        }
        
        .panel-title::before {
            content: ''; position: absolute;
            left: 0; top: 50%;
            transform: translateY(-50%);
            width: 4px; height: 18px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        .main-content{
            grid-row: 3;
            border:1px solid var(--panel-border-color);
            border-radius:4px; overflow:hidden;
            background: linear-gradient(135deg, rgba(0,28,58,0.8) 0%, rgba(0,10,20,0.9) 100%);
            position: relative;
        }
        
        .view-controls {
            position: absolute; bottom: 20px; left: 50%;
            transform: translateX(-50%);
            display: flex; gap: 10px;
            background: rgba(0, 28, 58, 0.7);
            padding: 8px; border-radius: 8px;
            border: 1px solid var(--panel-border-color);
        }
        
        .view-btn {
            background: transparent; border: 1px solid var(--primary-color);
            color: var(--primary-color); padding: 8px 16px;
            border-radius: 4px; cursor: pointer;
            display: flex; align-items: center; gap: 8px;
            transition: all 0.3s ease;
        }
        
        .view-btn.active, .view-btn:hover {
            background: var(--primary-color); color: #fff;
            box-shadow: 0 0 10px var(--glow-color);
        }
        
        .page-content { width: 100%; height: 100%; }
        
        .card {
            background: rgba(0,28,58,0.25);
            border-radius: 6px; padding: 10px;
            margin-bottom: 8px;
            border: 1px solid rgba(0,174,255,0.1);
            transition: all 0.3s ease;
        }
        
        .card:hover {
            border-color: rgba(0,174,255,0.3);
            box-shadow: 0 0 15px rgba(0,174,255,0.1);
        }
        
        .weather-card-reloaded {
            display: flex; align-items: center;
            padding: 12px; gap: 20px;
        }
        
        .weather-main {
            display: flex; align-items: center;
            gap: 10px; border-right: 1px solid var(--panel-border-color);
            padding-right: 20px;
        }
        
        .weather-temp {
            font-size: 42px; font-weight: 700;
            font-family: 'Orbitron', sans-serif;
            color: #fff;
        }
        
        .weather-icon-container { display: flex; flex-direction: column; align-items: center; gap: 5px; }
        .weather-icon-container i { font-size: 28px; color: var(--primary-color); }
        .weather-icon-container span {
            background: #1e628a; color: #fff;
            padding: 2px 8px; border-radius: 4px;
            font-size: 12px;
        }
        
        .weather-forecast-reloaded { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
        .forecast-item-reloaded { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
        .forecast-item-reloaded i { color: #a0a0a0; }
        
        .env-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .env-item { padding: 8px; text-align: center; color: #fff; }
        .env-item i { font-size: 20px; color: var(--primary-color); }
        .env-value { font-size: 16px; font-weight: bold; margin: 5px 0; }
        .env-label { font-size: 12px; color: var(--text-color-secondary); }

        .device-stats { display: flex; justify-content: space-around; align-items: center; padding: 8px 0; }
        .stat-item, .stat-item-center { text-align: center; }
        .total-devices { font-size: 24px; font-weight: bold; color: var(--primary-color); }
        .progress-circle {
            width: 70px; height: 70px; border-radius: 50%;
            display: grid; place-items: center;
            background: conic-gradient(var(--primary-color) calc(var(--p, 0) * 1%), #2c3e50 0);
            position: relative; margin: 0 auto 5px;
        }
        .progress-circle::before {
            content: ""; position: absolute;
            width: 55px; height: 55px;
            background: var(--panel-bg-color); border-radius: 50%;
        }
        .progress-value { position: relative; font-size: 18px; font-weight: bold; color: #fff; }
        .progress-circle.p93 { --p: 93; }
        .stat-label { font-size: 14px; color: var(--text-color-secondary); }

        .device-list-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .device-list-table th, .device-list-table td { text-align: center; padding: 6px 4px; border: none; }
        .device-list-table thead { background: rgba(0, 174, 255, 0.1); color: var(--text-color); }
        .device-list-table tbody tr:nth-child(even) { background-color: rgba(0, 28, 58, 0.2); }
        .status-running { color: #00ff00; }
        .status-standby { color: #ffa500; }

        .alarm-list { display: flex; flex-direction: column; gap: 6px; }
        .alarm-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 6px; background: rgba(0,174,255,0.05);
            border-left: 3px solid #ffa500; font-size: 12px;
        }
        .alarm-status { padding: 2px 6px; border-radius: 4px; font-size: 11px; color: white; }
        .alarm-status.new { background-color: #ff4d4f; }
        .alarm-status.handled { background-color: #5a677d; }

        .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .video-item {
            position: relative; border-radius: 4px;
            overflow: hidden; border: 1px solid var(--panel-border-color);
            aspect-ratio: 16 / 10;
            background: rgba(0,28,58,0.3);
        }
        .video-item img { 
            width: 100%; height: 100%; 
            object-fit: cover; display: block; 
            transition: transform 0.3s ease;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
        }
        @keyframes fadeIn { to { opacity: 1; } }
        .video-item:hover img { transform: scale(1.1); }
        .video-label, .video-status {
            position: absolute; background: rgba(0, 0, 0, 0.6);
            padding: 2px 6px; font-size: 12px;
            border-radius: 4px; color: #fff;
        }
        .video-label { top: 5px; left: 5px; }
        .video-status { bottom: 5px; left: 5px; display: flex; align-items: center; }
        .video-status.online::before {
            content: ''; display: inline-block;
            width: 8px; height: 8px;
            background-color: #00ff00; border-radius: 50%;
            margin-right: 5px;
            box-shadow: 0 0 5px #00ff00;
        }

        .energy-analysis-section .panel-title span { font-size: 14px; color: var(--text-color-secondary); margin-left: auto; }
        .energy-tabs { display: flex; border-bottom: 1px solid var(--panel-border-color); margin-bottom: 10px; }
        .energy-tab-btn {
            z-index: 10; /* 确保按钮在最上层 */
            pointer-events: auto; /* 确保可以点击 */
            background: transparent; border: none; color: var(--text-color-secondary);
            padding: 8px 16px; cursor: pointer; font-size: 14px; position: relative;
        }
        .energy-tab-btn::after {
            content: ''; position: absolute; bottom: -1px; left: 0;
            width: 0; height: 2px; background: var(--primary-color);
            transition: width 0.3s ease;
        }
        .energy-tab-btn.active, .energy-tab-btn:hover { color: var(--primary-color); }
        .energy-tab-btn.active::after, .energy-tab-btn:hover::after { width: 100%; }
        
        .energy-stats-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
        .energy-card { padding: 10px; text-align: center; background: rgba(0, 28, 58, 0.4); border-radius: 4px; }
        .energy-value { font-size: 20px; font-weight: bold; font-family: 'Orbitron', sans-serif; color: #fff; }
        .energy-label { font-size: 12px; color: var(--text-color-secondary); margin: 4px 0; }
        .energy-change { font-size: 12px; }
        .energy-change.down { color: #00ff00; }
        .energy-change.up { color: #ff4d4f; }
        .energy-chart-container { 
            height: 200px; 
            width: 100%;
            position: relative;
            background: rgba(0, 28, 58, 0.3);
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            min-height: 200px;
            overflow: hidden;
        }
        
        .energy-chart-container canvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
            max-width: none !important;
            max-height: none !important;
        }
        
        .disease-list { display: flex; flex-direction: column; gap: 6px; }
        .disease-item {
            display: flex; justify-content: space-between;
            align-items: center; padding: 8px;
            background: rgba(0,28,58,0.3); border-radius: 4px;
        }
        .disease-name { font-size: 14px; }
        .disease-probability { font-size: 14px; font-weight: 500; }
        .disease-probability.high { color: #ff4d4f; }
        .disease-probability.medium { color: #ffa500; }
        .disease-probability.low { color: #00ff00; }
 
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="farm-selector" id="farmSelector">
                <i class="fas fa-map-marker-alt"></i>
                <span id="currentFarm">北京一号智慧农场</span>
                <i class="fas fa-chevron-down"></i>
                <div class="farm-dropdown" id="farmDropdown">
                    <div class="farm-option active" data-farm="北京一号智慧农场">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>北京一号智慧农场</span>
                    </div>
                    <div class="farm-option" data-farm="上海二号智慧农场">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>上海二号智慧农场</span>
                    </div>
                    <div class="farm-option" data-farm="深圳三号智慧农场">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>深圳三号智慧农场</span>
                    </div>
                    <div class="farm-option" data-farm="成都四号智慧农场">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>成都四号智慧农场</span>
                    </div>
                </div>
            </div>
            <h1 class="header-title">智慧农场可视化中心</h1>
            <div class="header-datetime" id="datetime"></div>
        </header>

        <nav class="main-nav">
            <a class="nav-item active" data-page="dashboard"><i class="fas fa-tachometer-alt"></i><span>数据总览</span></a>
            <a class="nav-item" data-page="control"><i class="fas fa-cogs"></i><span>设备控制</span></a>
            <a class="nav-item" data-page="analysis"><i class="fas fa-chart-pie"></i><span>数据分析</span></a>
            <a class="nav-item" data-page="warning"><i class="fas fa-exclamation-triangle"></i><span>告警中心</span></a>
            <a class="nav-item" data-page="report"><i class="fas fa-file-alt"></i><span>报表管理</span></a>
        </nav>
        
        <div class="panel" style="grid-row: 3; grid-column: 1;">
            <div class="panel-content">
                 <div class="card weather-card-reloaded">
                     <div class="weather-main">
                         <div class="weather-icon-container">
                            <i class="fas fa-sun"></i>
                            <span>晴</span>
                         </div>
                         <div class="weather-temp">28°</div>
                     </div>
                     <div class="weather-forecast-reloaded">
                        <div class="forecast-item-reloaded"><span>今天</span><i class="fas fa-sun"></i><span>20°/30°</span></div>
                        <div class="forecast-item-reloaded"><span>明天</span><i class="fas fa-cloud"></i><span>20°/30°</span></div>
                        <div class="forecast-item-reloaded"><span>后天</span><i class="fas fa-cloud-rain"></i><span>20°/30°</span></div>
                     </div>
                 </div>

                 <div class="card env-details-grid">
                    <div class="env-item">
                        <i class="fas fa-thermometer-half"></i>
                        <div class="env-value">28.5°C</div>
                        <div class="env-label">空气温度</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-tint"></i>
                        <div class="env-value">65%</div>
                        <div class="env-label">空气湿度</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-lightbulb"></i>
                        <div class="env-value">1800lux</div>
                        <div class="env-label">光照强度</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-leaf"></i>
                        <div class="env-value">5.8</div>
                        <div class="env-label">土壤PH</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-water"></i>
                        <div class="env-value">55%</div>
                        <div class="env-label">土壤湿度</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-wind"></i>
                        <div class="env-value">1200ppm</div>
                        <div class="env-label">CO2浓度</div>
                    </div>
                </div>

                <div class="card device-monitoring-section">
                    <div class="panel-title"><i class="fas fa-chart-pie"></i>设备监控</div>
                    <div class="device-stats">
                        <div class="stat-item">
                            <div class="total-devices">26</div>
                            <div class="stat-label">设备总数</div>
                        </div>
                        <div class="stat-item-center">
                            <div class="progress-circle p93" id="device-online-rate">
                                <div class="progress-value">93%</div>
                            </div>
                            <div class="stat-label">在线率</div>
                        </div>
                        <div class="stat-item">
                            <div class="total-devices" style="color: #ff4d4f;">2</div>
                            <div class="stat-label">异常设备</div>
                        </div>
                    </div>
                    <div class="device-list-table">
                        <table>
                            <thead><tr><th>设备名称</th><th>状态</th><th>位置</th></tr></thead>
                            <tbody>
                                <tr><td>风机 #1</td><td class="status-running">运行中</td><td>A区</td></tr>
                                <tr><td>水帘 #1</td><td class="status-running">运行中</td><td>A区</td></tr>
                                <tr><td>补光灯 #3</td><td class="status-standby">待机</td><td>B区</td></tr>
                                <tr><td>滴灌阀 #5</td><td class="status-standby">待机</td><td>C区</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card alarm-section">
                    <div class="panel-title"><i class="fas fa-bell"></i>监测预警</div>
                    <div class="alarm-list">
                        <div class="alarm-item"><span>CO2浓度过高</span><div class="alarm-status new">新告警</div></div>
                        <div class="alarm-item"><span>#3补光灯故障</span><div class="alarm-status new">新告警</div></div>
                        <div class="alarm-item"><span>A区温度过高</span><div class="alarm-status handled">已处理</div></div>
                        <div class="alarm-item"><span>土壤湿度偏低</span><div class="alarm-status new">新告警</div></div>
                        <div class="alarm-item"><span>B区光照不足</span><div class="alarm-status handled">已处理</div></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-content" style="grid-row: 3; grid-column: 2;">
            <div class="page-content" id="dashboard-main" style="display:block;">
                 <div id="model-container" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,28,58,0.3);">
                    <div style="text-align: center; color: var(--text-color-secondary);">
                        <i class="fas fa-cube" style="font-size: 48px; margin-bottom: 16px; color: var(--primary-color);"></i>
                        <div>3D模型加载中...</div>
                    </div>
                 </div>
            </div>
            <div class="page-content" id="control-main" style="display:none;">设备控制页面</div>
            <div class="page-content" id="analysis-main" style="display:none;">数据分析页面</div>
            <div class="page-content" id="warning-main" style="display:none;">告警中心页面</div>
            <div class="page-content" id="report-main" style="display:none;">报表管理页面</div>
            <div class="view-controls">
                <button class="view-btn active"><i class="fas fa-cube"></i> 外景</button>
                <button class="view-btn"><i class="fas fa-seedling"></i> 内景</button>
            </div>
        </div>
        
        <div class="panel" style="grid-row: 3; grid-column: 3;">
            <div class="panel-content">
                 <div class="card video-monitoring-section">
                    <div class="panel-title"><i class="fas fa-video"></i>视频监控</div>
                    <div class="video-grid">
                        <div class="video-item">
                           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3a8a'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23ffffff' font-family='Arial' font-size='16'%3E1号大棚-番茄区%3C/text%3E%3C/svg%3E" alt="Greenhouse 1" loading="lazy">
                            <div class="video-label">1号大棚-番茄区</div>
                            <div class="video-status online">在线</div>
                        </div>
                        <div class="video-item">
                           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3a8a'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23ffffff' font-family='Arial' font-size='16'%3E2号大棚-黄瓜区%3C/text%3E%3C/svg%3E" alt="Greenhouse 2" loading="lazy">
                            <div class="video-label">2号大棚-黄瓜区</div>
                            <div class="video-status online">在线</div>
                        </div>
                    </div>
                 </div>
                <div class="card energy-analysis-section">
                    <div class="panel-title"><i class="fas fa-chart-bar"></i>能耗分析 <span>2025-05-28</span></div>
                    <div class="energy-tabs">
                        <button class="energy-tab-btn active" data-type="electric">农场用电统计</button>
                        <button class="energy-tab-btn" data-type="water">农场用水统计</button>
                    </div>
                    <div class="energy-stats-cards">
                        <div class="energy-card">
                            <div class="energy-value" id="energy-value-day">4000</div>
                            <div class="energy-label" id="energy-label-day">本日总能耗 kw/h</div>
                            <div class="energy-change down" id="energy-change-day">较昨日 -15%</div>
                        </div>
                        <div class="energy-card">
                            <div class="energy-value" id="energy-value-month">95k</div>
                            <div class="energy-label" id="energy-label-month">本月总能耗 kw/h</div>
                            <div class="energy-change down" id="energy-change-month">较上月 -15%</div>
                        </div>
                        <div class="energy-card">
                            <div class="energy-value" id="energy-value-year">1.2M</div>
                            <div class="energy-label" id="energy-label-year">本年总能耗 kw/h</div>
                            <div class="energy-change up" id="energy-change-year">较去年 15%</div>
                        </div>
                    </div>
                    <div class="energy-chart-container">
                        <canvas id="energyAnalysisChart"></canvas>
                    </div>
                </div>
                <div class="card disease-analysis-section">
                    <div class="panel-title"><i class="fas fa-bug"></i>植物虫害病害分析</div>
                    <div class="disease-list">
                        <div class="disease-item"><div class="disease-name">灰霉病</div><div class="disease-probability high">高风险 85%</div></div>
                        <div class="disease-item"><div class="disease-name">蚜虫</div><div class="disease-probability medium">中风险 65%</div></div>
                        <div class="disease-item"><div class="disease-name">白粉病</div><div class="disease-probability low">低风险 25%</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 基础功能立即执行
        (function() {
            // Datetime
            function updateDateTime() {
                const now = new Date();
                const year = now.getFullYear();
                const month = (now.getMonth() + 1).toString().padStart(2, '0');
                const day = now.getDate().toString().padStart(2, '0');
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const seconds = now.getSeconds().toString().padStart(2, '0');
                document.getElementById('datetime').textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
            setInterval(updateDateTime, 1000);
            updateDateTime();

            // 农场选择器
            const farmSelector = document.getElementById('farmSelector');
            const farmDropdown = document.getElementById('farmDropdown');
            const currentFarm = document.getElementById('currentFarm');
            const farmOptions = document.querySelectorAll('.farm-option');

            farmSelector.addEventListener('click', function(e) {
                e.stopPropagation();
                farmDropdown.classList.toggle('show');
            });

            document.addEventListener('click', function() {
                farmDropdown.classList.remove('show');
            });

            farmOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const farmName = this.getAttribute('data-farm');
                    currentFarm.textContent = farmName;
                    
                    // 更新选中状态
                    farmOptions.forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                    
                    farmDropdown.classList.remove('show');
                });
            });

            // Page switching
            document.querySelectorAll('.nav-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    document.querySelectorAll('.main-content .page-content').forEach(p => p.style.display = 'none');
                    const pageId = this.getAttribute('data-page') + '-main';
                    const page = document.getElementById(pageId);
                    if (page) {
                        page.style.display = 'block';
                    }
                });
            });

            // Set initial online rate
            const rate = 93;
            document.getElementById('device-online-rate').style.setProperty('--p', rate);
            document.querySelector('#device-online-rate .progress-value').textContent = `${rate}%`;
        })();

        // 图表功能 - 最简单版本
        let energyChart = null;
        
        // 能耗数据
        const energyData = {
            electric: {
                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                values: [120, 150, 200, 250, 220, 180],
                stats: { day: 4000, month: '95k', year: '1.2M' },
                unit: 'kw/h'
            },
            water: {
                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                values: [30, 40, 55, 60, 50, 45],
                stats: { day: 850, month: '22k', year: '250k' },
                unit: 'm³'
            }
        };
        
        // 初始化图表
        function initChart() {
            console.log('开始初始化图表...');
            
            const canvas = document.getElementById('energyAnalysisChart');
            if (!canvas) {
                console.error('找不到canvas元素');
                return;
            }
            
            console.log('找到canvas元素');
            
            // 创建图表
            energyChart = new Chart(canvas, {
                type: 'line',
                data: {
                    labels: energyData.electric.labels,
                    datasets: [{
                        label: '能耗',
                        data: energyData.electric.values,
                        borderColor: 'rgba(0, 174, 255, 1)',
                        backgroundColor: 'rgba(0, 174, 255, 0.2)',
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { ticks: { color: 'rgba(255,255,255,0.7)' } },
                        y: { ticks: { color: 'rgba(255,255,255,0.7)' } }
                    }
                }
            });
            
            console.log('图表创建成功');
            
            // 绑定tab事件
            bindTabEvents();
            
        }        }
        
        // 绑定tab事件
        function bindTabEvents() {
            console.log('绑定tab事件...');
            
            const tabs = document.querySelectorAll('.energy-tab-btn');
            console.log('找到tab按钮数量:', tabs.length);
            
            tabs.forEach((btn, index) => {
                console.log(`按钮 ${index}:`, btn);
                console.log(`按钮 ${index} 的data-type:`, btn.getAttribute('data-type'));
                
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const type = this.getAttribute('data-type');
                    console.log('点击了tab:', type);
                    
                    // 更新按钮状态
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新图表
                    updateChart(type);
                });
            });
            
            console.log('tab事件绑定完成');
        }
        
        // 更新图表数据
        function updateChart(type) {
            console.log('更新图表:', type);
            
            if (!energyChart) {
                console.error('图表未初始化');
                return;
            }
            
            const data = energyData[type];
            if (!data) {
                console.error('数据不存在:', type);
                return;
            }
            
            // 绑定tab事件
        function bindTabEvents() {
            console.log('绑定tab事件...');
            
            const tabs = document.querySelectorAll('.energy-tab-btn');
            console.log('找到tab按钮数量:', tabs.length);
            
            tabs.forEach((btn, index) => {
                console.log(`按钮 ${index}:`, btn);
                console.log(`按钮 ${index} 的data-type:`, btn.getAttribute('data-type'));
                
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const type = this.getAttribute('data-type');
                    console.log('点击了tab:', type);
                    
                    // 更新按钮状态
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新图表
                    updateChart(type);
                });
            });
            
            console.log('tab事件绑定完成');
        }
        
        // 更新图表数据
            energyChart.data.labels = data.labels;
            energyChart.data.datasets[0].data = data.values;
            energyChart.update();
            
            // 更新统计数据
            document.getElementById('energy-value-day').textContent = data.stats.day;
            document.getElementById('energy-value-month').textContent = data.stats.month;
            document.getElementById('energy-value-year').textContent = data.stats.year;
            document.getElementById('energy-label-day').textContent = `本日总能耗 ${data.unit}`;
            document.getElementById('energy-label-month').textContent = `本月总能耗 ${data.unit}`;
            document.getElementById('energy-label-year').textContent = `本年总能耗 ${data.unit}`;
            
            console.log('图表更新完成');
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            console.log('页面加载完成');
            setTimeout(function() {
                initChart();
            }, 100);
        });

        // 延迟加载3D模型
        window.addEventListener('load', function() {
            setTimeout(function() {
                const container = document.getElementById('model-container');
                container.innerHTML = `
                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,28,58,0.3); border-radius: 8px;">
                        <div style="text-align: center; color: var(--text-color-secondary);">
                            <i class="fas fa-cube" style="font-size: 64px; margin-bottom: 16px; color: var(--primary-color);"></i>
                            <div style="font-size: 18px; margin-bottom: 8px;">智慧农场3D模型</div>
                            <div style="font-size: 14px; opacity: 0.7;">模型加载完成</div>
                        </div>
                    </div>
                `;
            }, 1000); // 延迟1秒显示3D模型占位符
        });
    </script>
</body>
</html>
